<script setup>
    import { sdCityList } from '@/utils/index'
    import RightTreatment from '@/components/Search/RightTreatment.vue'
    import RightInsurance from '@/components/Search/RightInsurance.vue'
    import RightMessage from '@/components/Search/RightMessage.vue' 

    import CenterForm from '@/components/Search/CenterForm.vue' 

    let current = $ref(0)

    let rightTreatment = $ref(null)
    let rightInsurance = $ref(null)

    let centerForm = $ref(null)

    const handleClick = (index) => {
        current = index
        centerForm.FilterByCity()
        rightTreatment.init()
        rightInsurance.init()
    }
    

</script>

<template>
    <div class="content-main search-page-warp">
        <div class="left-card card-box">
            <div class="card-title"><div class="title">山东省地级市列表</div></div>
            <div class="city-list">
                <div class="item" :class="{ active: current == 0 }"  @click="handleClick(0)">山东省</div>
                <div
                    v-for="(item, index) in sdCityList"
                    :key="index"
                    class="item"
                    :class="{ active: current == index+1 }"
                    @click="handleClick(index+1)"
                >
                    {{ item }}
                </div>
            </div>
        </div>

        <div class="right-card">

            <!-- 待遇发放金额统计 -->
            <right-treatment ref="rightTreatment"></right-treatment>

            <!-- 保险缴纳 -->
            <right-insurance ref="rightInsurance"></right-insurance>

            <!-- 工作通知 -->
            <right-message></right-message>

        </div>

        <div class="center-search">
            <center-form ref="centerForm"></center-form>
        </div>

    </div>
</template>

<style lang="less">
    .search-page-warp{
        .card-title{
            height: 44px;
            color: #fff;
            font-size: 24px;
            padding: 0 10px;
            font-weight: 700;
            background: linear-gradient(92deg,rgba(8,37,183,.59),rgba(1,180,255,.1));

            .title{
                display: inline-block;
                padding: 0 10px;
                color: #0096ff;
                line-height: 44px;
                cursor: pointer;
                background: linear-gradient(92deg,#0072FF 0%,#02F1FA 48%,#01AAFF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .card-box{
            border: 1px solid #02246C;
            box-shadow: 0 0 20px #0825b7 inset;
        }

        .left-card{
            width: 303px;
            height: 870px;

            .city-list{
                padding: 18px 30px 30px 30px;

                .item{
                    font-size: 18px;
                    color: #fff; 
                    padding: 12px 10px;
                    cursor: pointer;

                    &:first-child{
                        padding-left: 0;
                    }

                    &:hover, &.active{
                        color: #00A4FF;
                    }
                }
            }
        }

        .right-card{
            width: 445px;
        }

        .center-search{
            margin: 114px 496px 0 352px;
        }
    }
</style>